<template>
    <div>
        <Header :isGoBack="false" :class="isHeaderFixed ? 'fixed-header-shadow' : 'fixed-header'">
            <template v-slot:left>
                <div>
                    {{ checkedBookData.edition_name }}- {{ checkedBookData.grade_name }}>
                    打印试卷
                </div>
            </template>
            <template v-slot:right>
                <div class="test-btn">
                    <span class="btn-bg ml20">
                        <el-button class="button button-bg-second" @click="printTest">打印</el-button>
                    </span>
                    <span class="btn-bg ml20">
                        <el-button class="button button-border-second" @click="goStudyCenter">
                            返回测试中心
                        </el-button>
                    </span>
                </div>
            </template>
        </Header>
        <div class="w1200 general-test-box print-test-box">
            <div class="print-test-box-radio">
                <el-radio-group v-model="isShowAnswer">
                    <el-radio :label="0">隐藏答案</el-radio>
                    <el-radio :label="1">显示答案</el-radio>
                </el-radio-group>
            </div>
            <div id="printTest" ref="printTest" class="general-test print-test">
                <h3 class="test-title">
                    <span v-if="checkedBookData.edition_name && checkedBookData.grade_name">
                        智慧1+1{{ checkedBookData.edition_name }}-
                        {{ $route.query.gradeName }}{{$route.query.groupName}}</span>-
                    <span>单词测试卷</span>
                </h3>
                <p class="test-name">学生姓名：<span class="line"></span></p>
                <table border="1" class="question-list-table" style="width: 90%; margin: 20px auto 0; table-layout: fixed;">
                    <!-- <tr>
                        <th>单词</th>
                        <th>词义</th>
                    </tr>
                    <tr>
                        <td>import</td>
                        <td>进口，进口商品；输入，引进；</td>
                    </tr>
                    <tr>
                        <td>one</td>
                        <td>一个</td>
                    </tr> -->
                    <tr v-for="(question, qIndex) in tableData" :key="qIndex">
                        <td class="question-index">
                            <span>
                                <span v-if="!isShowAnswer">
                                    <span  v-if="question.status == 0"> {{
                                        question.name
                                    }}</span>
                                    <span v-else></span>
                                </span>
                                <span v-if="isShowAnswer" class="line-answer">{{
                                    question.name
                                }}</span>
                            </span>
                        </td>
                        <td>
                            <span v-if="!isShowAnswer">
                                <span  v-if="question.status == 1"> {{
                                    question.paraphrase
                                }}</span>
                                <span v-else></span>
                            </span>
                            <span v-if="isShowAnswer" class="line-answer">{{
                                question.paraphrase
                            }}</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
import Header from "@/components/Header";
export default {
    data() {
        return {
            checkedBookData: null,
            isHeaderFixed: false,
            isShowAnswer: 0,
            tableData: []
        };
    },
    computed: {
    },
    components: {
        Header,
    },
    methods: {
        printTest() {
            //   PrintJS({
            //     printable: "printTest",
            //     type: "html",
            //     documentTitle: "测验",
            //     // scanStyles: false,
            //     // 继承原来的所有样式
            //     targetStyles: ["*"],
            //     // css: "/assets/css/print.css",
            //   });
            this.$print(this.$refs.printTest);
            // window.print();
        },
        goStudyCenter() {
            this.$router.push({
                name: "individuationReadTest",
            });
        },
    },
    created() {
        this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
        this.tableData = JSON.parse(this.$route.query.tableData)
    },
    watch: {},
};
</script>

<style lang="scss" scoped>

th,
td {
    // padding-left: 20px;
    height: 30px;
    font-size: 14px;
    text-align: center;
}
th{
    // text-align: center;
    font-weight: 700;
}
tr {
    page-break-inside: avoid;
}
</style>